<template>
  <div>
    <el-divider content-position="left">
      <span style='font-size:18px'>根据您的信息获得以下信息，请选择开放您的个人经历供HR审核</span>
    </el-divider>
    <div width="100%">
        <vxe-toolbar ref="xToolbar" :refresh="{query: searchMethod}" export print custom>
          <template #buttons>
              <vxe-input style="margin:0 10px;width: 230px;"  v-model="demo1.filterName" type="search" placeholder="搜索" @keyup="searchEvent1"></vxe-input>
          </template>
        </vxe-toolbar>

        <vxe-table
          border
          resizable
          show-overflow
          keep-source
          ref="xTree"
          row-id="id"
          :expand-config="tableExpand"
          :print-config="{}"
          :export-config="{}"
          :loading="demo1.loading"
          :tree-config="demo1.treeConfig"
          :edit-config="{trigger: 'click', mode: 'row', showStatus: true}"
          :data="demo1.tableData">
          <vxe-table-column type="checkbox" width="60"></vxe-table-column>
          <vxe-table-column type="expand" title="详情" width="80">
            <template #content="{ row }">
              <ul>
                <li>
                  <span>ID：</span>
                  <span>{{ row.id }}</span>
                </li>
                <li>
                  <span>Name：</span>
                  <span>{{ row.name }}</span>
                </li>
                <li>
                  <span>Date</span>
                  <span>{{ row.date }}</span>
                </li>
              </ul>
              <el-empty description="描述文字"></el-empty>
            </template>
          </vxe-table-column>
          <vxe-table-column field="time" title="时间" tree-node width='250'></vxe-table-column>
          <vxe-table-column field="company" title="公司" width='280'></vxe-table-column>
          <vxe-table-column field="position" title="职位" width='280'></vxe-table-column>
          <vxe-table-column field="witness" title="证明人" width='294'></vxe-table-column>
        </vxe-table>
</div>
  </div>
</template>
<script  lang="ts">
import { defineComponent, reactive, ref, nextTick } from 'vue'
import { VXETable, VxeTableInstance, VxeToolbarInstance } from 'vxe-table'
import XEUtils from 'xe-utils'

export default defineComponent({
  setup () {
    const demo1 = reactive({
      loading: false,
      tableData: [],
      treeConfig: {
        children: 'children'
      }
    })

    const xTree = ref({} as VxeTableInstance)
    const xToolbar = ref({} as VxeToolbarInstance)

    const findList = () => {
      demo1.loading = true
      return new Promise(resolve => {
        setTimeout(() => {
          demo1.tableData = [
            { id: 1, time: '2010年04月-2012年04月', company: '1号公司', position: '实习生', witness: '张三，赵六' },
            { id: 2, time: '2012年08月-2015年08月', company: '2号公司', position: '后端程序员', witness: '李四',},
            { id: 3, time: '2015年09月-2017年04月', company: '3号公司', position: '后端程序员', witness: '王五' },
            { id: 4, time: '2017年05月-2019年12月', company: '4号公司', position: '项目经理', witness: '牛头' },
            { id: 5, time: '2020年01月-2021年04月', company: '5号公司', position: '项目经理', witness: '马面' }
          ] as any[]
          demo1.loading = false
          resolve(null)
        }, 300)
      })
    }

    const tableExpand = ref({
              lazy: true,
              loadMethod ({ row }) {
                return new Promise(resolve => {
                  setTimeout(() => {
                    resolve()
                  }, 500)
                })
              }
            } as VxeTablePropTypes.ExpandConfig)

    const insertEvent = async () => {
      const $table = xTree.value
      const record = {
        time: '新数据',
        date: XEUtils.toDateString(new Date(), 'yyyy-MM-dd')
      }
      const { row: newRow } = await $table.insert(record)
      await $table.setActiveRow(newRow)
    }

    const searchMethod = () => {
      const $table = xTree.value
      // 清除所有状态
      $table.clearAll()
      return findList()
    }

    nextTick(() => {
      // 将表格和工具栏进行关联
      const $table = xTree.value
      const $toolbar = xToolbar.value
      $table.connect($toolbar)
      findList()
    })

    const searchEvent1 = () => {
      const filterName = XEUtils.toValueString(demo1.filterName).trim().toLowerCase()
      if (filterName) {
        const filterRE = new RegExp(filterName, 'gi')
        const searchProps = ['name', 'position', 'nomnal', 'address']
        const rest = demo1.tableData.filter(item => searchProps.some(key => XEUtils.toValueString(item[key]).toLowerCase().indexOf(filterName) > -1))
        demo1.list = rest.map(row => {
          const item = Object.assign({}, row)
          searchProps.forEach(key => {
            item[key] = XEUtils.toValueString(item[key]).replace(filterRE, match => `<span class="keyword-lighten">${match}</span>`)
          })
          return item
        })
      } else {
        demo1.list = demo1.tableData
      }
    }

    searchEvent1()

    return {
      tableExpand,
      xTree,
      xToolbar,
      demo1,
      searchEvent1,
      insertEvent,
      searchMethod,
    }
  }
});
</script>
<style lang="scss" scoped>
</style>
